<template>
  <div class="home-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-title">欢迎使用智学云帆教学管理系统</div>
      <div class="welcome-time">{{ now }}</div>
    </el-card>
    <!-- 统计卡片 -->
    <div class="stat-cards">
      <el-card class="stat-card">
        <div class="stat-title"><el-icon><CircleCheck /></el-icon> 班级总数</div>
        <div class="stat-value">12</div>
        <div class="stat-desc">较上月增长 2 个</div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-title"><el-icon><User /></el-icon> 学员总数</div>
        <div class="stat-value">256</div>
        <div class="stat-desc">较上月增长 12 人</div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-title"><el-icon><OfficeBuilding /></el-icon> 部门总数</div>
        <div class="stat-value">8</div>
        <div class="stat-desc">本月新增 1 个</div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-title"><el-icon><Avatar /></el-icon> 员工总数</div>
        <div class="stat-value">36</div>
        <div class="stat-desc">本月新增 3 人</div>
      </el-card>
    </div>
    <!-- 快捷入口 -->
    <div class="quick-title">快捷入口</div>
    <div class="quick-entrance">
      <el-card class="quick-card" @click="go('/class-manage')">班级管理</el-card>
      <el-card class="quick-card" @click="go('/student-manage')">学员管理</el-card>
      <el-card class="quick-card" @click="go('/dept-manage')">部门管理</el-card>
      <el-card class="quick-card" @click="go('/staff-manage')">员工管理</el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, OfficeBuilding, Avatar, CircleCheck } from '@element-plus/icons-vue'

const now = ref('')
function updateTime() {
  const d = new Date()
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  const s = String(d.getSeconds()).padStart(2, '0')
  now.value = `${y}年${m}月${day}日 ${h}:${min}:${s}`
}
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})

const router = useRouter()
function go(path) {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  background: linear-gradient(180deg, #f4f8fb 0%, #e9f1fa 100%);
  min-height: 100vh;
  padding: 24px;
}
.welcome-card {
  background: linear-gradient(90deg, #f7fbff 0%, #e3f0fc 100%);
  color: #234;
  margin-bottom: 24px;
  border: none;
}
.welcome-title {
  font-size: 28px;
  font-weight: bold;
}
.welcome-time {
  font-size: 16px;
  margin-top: 8px;
}
.stat-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  flex: 1;
  text-align: left;
  border-radius: 8px;
  border: none;
  background: #fff;
  box-shadow: 0 2px 8px #0001;
}
.stat-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-value {
  font-size: 32px;
  color: #409EFF;
  font-weight: bold;
}
.stat-desc {
  font-size: 14px;
  color: #aaa;
  margin-top: 4px;
}
.quick-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 16px;
}
.quick-entrance {
  display: flex;
  gap: 16px;
}
.quick-card {
  flex: 1;
  text-align: center;
  font-size: 18px;
  padding: 32px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px #0001;
  background: #fff;
}
.quick-card:hover {
  box-shadow: 0 4px 16px #409eff22;
  color: #409EFF;
}
</style> 